<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig" %>
<!DOCTYPE html>
<html>
<head>
  <%@ include  file="/WEB-INF/oss/base/common/variable.jsp"%>
  <%@ include  file="/WEB-INF/oss/base/common/resource_lib.jsp"%>
  <%@ include  file="/WEB-INF/oss/base/common/variable_js.jsp"%>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Three.js 3D Editor</title>
      <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
        #gui { position: absolute; top: 10px; right: 10px; }
        #info { position: absolute; top: 10px; left: 10px; color: white; font-family: Arial, sans-serif; }
      </style>
    </head>
<body>
<div id="gui"></div>
<div id="info">Left click: Rotate | Right click: Pan | Scroll: Zoom</div>
<script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
            }
        }
    </script>
<script type="module">
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
  import { TransformControls } from 'three/addons/controls/TransformControls.js';
  import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

  let scene, camera, renderer, orbitControls, transformControls;
  let selectedObject = null;
  const objects = [];

  function init() {
    // Scene setup
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // Lighting
    const ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
    directionalLight.position.set(1, 1, 1);
    scene.add(directionalLight);

    // Controls
    orbitControls = new OrbitControls(camera, renderer.domElement);
    transformControls = new TransformControls(camera, renderer.domElement);
    transformControls.addEventListener('dragging-changed', function (event) {
      orbitControls.enabled = !event.value;
    });
    scene.add(transformControls);

    camera.position.z = 5;

    // GUI
    const gui = new GUI({ container: document.getElementById('gui') });
    const sceneFolder = gui.addFolder('Scene');
    sceneFolder.add({ addCube: addCube }, 'addCube').name('Add Cube');
    sceneFolder.add({ addSphere: addSphere }, 'addSphere').name('Add Sphere');

    const objectFolder = gui.addFolder('Selected Object');
    objectFolder.add({ deleteObject: deleteSelectedObject }, 'deleteObject').name('Delete Object');

    window.addEventListener('resize', onWindowResize, false);
    window.addEventListener('click', onMouseClick, false);
  }

  function addCube() {
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshPhongMaterial({ color: Math.random() * 0xffffff });
    const cube = new THREE.Mesh(geometry, material);
    cube.position.set(
            Math.random() * 4 - 2,
            Math.random() * 4 - 2,
            Math.random() * 4 - 2
    );
    scene.add(cube);
    objects.push(cube);
    selectObject(cube);
  }

  function addSphere() {
    const geometry = new THREE.SphereGeometry(0.5, 32, 32);
    const material = new THREE.MeshPhongMaterial({ color: Math.random() * 0xffffff });
    const sphere = new THREE.Mesh(geometry, material);
    sphere.position.set(
            Math.random() * 4 - 2,
            Math.random() * 4 - 2,
            Math.random() * 4 - 2
    );
    scene.add(sphere);
    objects.push(sphere);
    selectObject(sphere);
  }

  function selectObject(object) {
    if (selectedObject) {
      selectedObject.material.emissive.setHex(0x000000);
    }
    selectedObject = object;
    selectedObject.material.emissive.setHex(0x555555);
    transformControls.attach(selectedObject);
  }

  function deleteSelectedObject() {
    if (selectedObject) {
      scene.remove(selectedObject);
      objects.splice(objects.indexOf(selectedObject), 1);
      transformControls.detach();
      selectedObject = null;
    }
  }

  function onMouseClick(event) {
    if (event.button !== 0) return; // Only handle left click

    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(objects);

    if (intersects.length > 0) {
      selectObject(intersects[0].object);
    } else if (selectedObject) {
      selectedObject.material.emissive.setHex(0x000000);
      selectedObject = null;
      transformControls.detach();
    }
  }

  function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }

  function animate() {
    requestAnimationFrame(animate);
    orbitControls.update();
    renderer.render(scene, camera);
  }

  init();
  animate();
</script>
</body>
</html>